<template>
  <!-- 注册成功 -->
  <div class="flex items-center justify-center h-full bg-gradient-to-br from-primary/90 to-secondary/90 p-4">
    <div
        class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 transform transition-all duration-300 hover:scale-[1.01]">
      <div class="text-center mb-8">
        <h3 class="text-[clamp(1rem,2vw,1.5rem)] font-bold text-dark">账号创建成功</h3>
        <p class="text-gray-500 mt-2">开始你的聊天之旅</p>
      </div>

      <div class="mt-6 text-start">
        <p class="text-gray-600">
          注册成功！欢迎您使用我们的产品，快来体验吧😊
        </p>

        <div class="h-8"><!-- 高度为2rem(32px)的间隔 --></div>

        <form class="space-y-4">
          <div class="flex items-center space-x-4">
            <label for="account" class="block text-sm font-medium text-gray-700 w-24">你的登录账号</label>
            <input
                type="text"
                id="account"
                v-model="registerInfo.account"
                class="flex-1 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all duration-300"
                disabled />
          </div>

          <div class="flex items-center space-x-4">
            <label for="contact" class="block text-sm font-medium text-gray-700 w-24">手机号/邮箱</label>
            <input
                type="text"
                id="contact"
                v-model="registerInfo.contact"
                class="flex-1 rounded-lg border border-gray-300 outline-none transition-all duration-300"
                disabled />
          </div>
        </form>
      </div>

      <div class="mt-6 text-center">
        <p class="text-gray-600">
          <button @click="emits('togglePane', 'login')"
                  class="font-medium text-blue-600 hover:text-blue-500 transition-colors">去登录
          </button>
        </p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import 'element-plus/es/components/message/style/css'
import {defineEmits} from "vue";

const emits = defineEmits([
  "togglePane"
])

//父组件传值时的定义
defineProps<{
  registerInfo: object;
}>();

</script>
<style scoped>

</style>